<%@page import="com.kensure.shike.constant.BusiConstant" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title><%=BusiConstant.name%>
    </title>
    <meta http-equiv="Content-Type" content="textml; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="<%=BusiConstant.context%>/page1/webview/css/index.css" rel="stylesheet" type="text/css" media="all"/>
    <script type="text/javascript" src="<%=BusiConstant.context%>/common/js/jquery.min.js"></script>
    <script type="text/javascript" src="<%=BusiConstant.context%>/common/js/jquery.cookie.js"></script>
    <script type="text/javascript" src="<%=BusiConstant.context%>/common/base.js?ver=<%=BusiConstant.version%>"></script>
    <script type="text/javascript" src="<%=BusiConstant.context%>/common/http.js?ver=<%=BusiConstant.version%>"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>

    <link href="<%=BusiConstant.context%>/common/css/swiper.min.css" rel="stylesheet">
    <script src="<%=BusiConstant.context%>/common/js/swiper.min.js"></script>

    <link href="<%=BusiConstant.context%>/page1/webview/index/css/index.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="<%=BusiConstant.context%>/page1/webview/index/css/modal.css" rel="stylesheet" type="text/css" media="all"/>
    <script src="<%=BusiConstant.context%>/page1/webview/index/js/modal.js"></script>

    <style type="text/css">
        .zfcontainer {
            background-color: #F8F9FD;
        }

        .swiper-container img {
            width: 100%;
            height: 180px;
        }
        .swiper-pagination {
            bottom: 20px!important;
        }
        .swiper-pagination .swiper-pagination-bullet-active {
            background-color: #FF5520!important;
        }

        .search-box {
            position: relative;
            padding: 0 10px;
            margin-top: -18px;
            z-index: 100;
        }
        .search-box .search-icon {
            position: absolute;
            width: 18px;
            height: 18px;
            top: 50%;
            left: 18px;
            transform: translateY(-50%);
        }
        .search-box input {
            width: 100%;
            height: 36px;
            padding-left: 40px;
            border-radius: 18px;
            background-color: #fff;
            border: none;
            box-sizing: border-box;
        }

        .category {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin: 12px;
            padding: 12px 6px;
            border-radius: 5px;
            background-color: #fff;
        }
        .category .category-item {
            width: 25%;
            margin-bottom: 16px;
            text-align: center;
        }
        .category .category-img {
            width: 48px;
            height: 48px;
            border-radius: 50%;
        }
        .category .category-name {
            margin-top: 4px;
            font-size: 14px;
            color: #333;
            overflow: hidden;
            white-space: nowrap;
            word-break: break-all;
            text-overflow: ellipsis;
        }

        .notice {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            height: 40px;
            margin: 0 12px;
            padding: 0 12px;
            background-color: #fff;
            border-radius: 5px;
        }
        .notice .notice-icon {
            width: 24px;
            height: 22px;
            margin-right: 12px;
        }
        .notice .notice-text {
            font-size: 14px;
            color: #FAA237;
        }

        .hot-factory {
            padding-top: 12px;
        }
        .hot-factory .title {
            padding: 0 12px;
            margin: 18px 0;
            font-size: 18px;
            color: #333;
        }
    </style>
</head>
<body>
<div class="zfcontainer">
    <!-- 广告滚动屏幕 -->
    <div id="swiper2" class="swiper-container" style="position: relative;">
        <div class="swiper-wrapper" id="banner1"> </div>
        <div class="swiper-pagination"></div>
    </div>
    <!-- 广告滚动屏幕结束 -->

    <section class="search-box" onclick="toSearch()">
        <img src="<%=BusiConstant.context%>/page1/webview/index/img/icon_search.png" class="search-icon" alt="search" />
        <input type="text" id="title" placeholder="搜索厂家" />
    </section>

    <%-- 分类 --%>
    <div id="category" class="category"></div>

    <%-- 通知 --%>
    <div class="notice">
        <img src="<%=BusiConstant.context%>/page1/webview/index/img/icon_notice.png" class="notice-icon" alt="notice" />
        <span class="notice-text">重要广告通知本月12号所有产品优惠8折啦…</span>
    </div>

    <!-- 热门厂家 -->
    <div class="hot-factory">
        <div class="title">热门厂家</div>
        <div id="spjs"></div>
    </div>
    <!-- 商品介绍结束 -->

    <!-- 抽奖介绍 -->
    <div id="choujiang"></div>
    <!-- 抽奖介绍结束 -->

    <button id="triggerModel" class="btn btn-primary btn-lg" style="display:none" data-toggle="modal" data-target="#myModal"></button>
</div>
</body>

<script>
    var basecontext = '<%=BusiConstant.context%>';
    var tokenid = getQueryVariable("token");
    addcookie(tokenid);

    //跳转函数
    function jumpPage(url) {
        wx.miniProgram.navigateTo({
            url: url
        });
    }

    function toSearch() {
        wx.miniProgram.navigateTo({
            url: '/pages/huopin/index'
        });
    }

    //获取广告
    function bannerhtml(row) {
        var html = ' <div class="swiper-slide"><a onclick="jumpPage(\'' + row.url + '\')"><img src="' + row.picurl + '"></a></div>';
        $("#banner1").append(html);
    }

    function getBanner() {
        var url = getbaseurl("/cms/cmslist.do");
        var data = {typeid: 1};
        postdo(url, data, function (data) {
            var rows = data.resultData.rows;
            for (var i = 0; rows && i < rows.length; i++) {
                var row = rows[i];
                bannerhtml(row);
            }
            new Swiper('#swiper2', {
                autoplay: 5000,
                pagination: '.swiper-pagination',
            });
        }, null, null);
    }
    getBanner();


    // 商品分类
    function getList() {
        var url = getbaseurl("/type/gettype.do");
        var data = { tokenid: tokenid };
        postdo(url, data, function (data) {
            var rows = data.resultData.rows;
            showCategory(rows);
            console.log(rows)
        }, null, null);
    }

    var imgs = [
        "<%=BusiConstant.context%>/page1/webview/index/img/icon_aluminum_alloy_factory.png",
        "<%=BusiConstant.context%>/page1/webview/index/img/icon_brick_factory.png",
        "<%=BusiConstant.context%>/page1/webview/index/img/icon_door_factory.png",
        "<%=BusiConstant.context%>/page1/webview/index/img/icon_extrusion_board_factory.png",
        "<%=BusiConstant.context%>/page1/webview/index/img/icon_glass_factory.png",
        "<%=BusiConstant.context%>/page1/webview/index/img/icon_paint_factory.png",
        "<%=BusiConstant.context%>/page1/webview/index/img/icon_rock_wool_board_factory.png",
        "<%=BusiConstant.context%>/page1/webview/index/img/icon_scaffolding_factory.png",
        "<%=BusiConstant.context%>/page1/webview/index/img/icon_stone_factory.png",
        "<%=BusiConstant.context%>/page1/webview/index/img/icon_switch_factory.png",
        "<%=BusiConstant.context%>/page1/webview/index/img/icon_waterproof_factory.png",
        "<%=BusiConstant.context%>/page1/webview/index/img/icon_wire_factory.png",
    ];

    function showCategory(rows) {
       var content = '';
       for(var index = 0; index < rows.length; index++) {
           var category = rows[index];
           var url = '/pages/huopin/index?typeid=' + category.id;
           var img = category.img || imgs[index % imgs.length];

           content += '<div onclick="jumpPage(\'' + url + '\')" class="category-item">';
           content += '<img class="category-img" src="' + img + '" + />';
           content += '<div class="category-name">' + category.name + '</div>';
           content += '</div>';
       }
       $('#category').append(content);
    }
    getList();

    // 热门商品
    function getHotList() {
        var url = getbaseurl("/baobei/qdlist.do");
        var data = { tokenid: tokenid };
        postdo(url, data, function (data) {
            var rows = data.resultData.rows || [];

            var html = '<div class="goods-container" >';
            var content = showtable(rows);
            html += content + ' </div>';

            $("#spjs").append(html);
        }, null, null);
    }

    function showtable(rows) {
        var content = '';
        for (var index = 0; index < rows.length; index++) {
            var baobei = rows[index];
            var title = baobei.title;
            if (baobei.code) {
                title += '<strong style="color:red">(' + baobei.code + ')</strong>';
            }

            content += '<div class="goods-box" onclick="jumpPage(\'/pages/goods-details/index?id=' + baobei.id + '\')">';
            content += '<div class="img-box">';
            content += ' <image src="' + baobei.picurl + '" class="image" mode="aspectFill" lazy-load="true" />';
            content += '</div>';
            content += '<div class="goods-title" style="text-overflow:ellipsis;word-wrap:break-word;word-break: break-all;">' + title + '</div>';
            content += '</div>';
        }
        return content;
    }

    getHotList();


    // 弹出窗口
    function getcj() {
        var url = getbaseurl('/cj/sysj.do');
        postdo(url, {}, function (data) {
            var row = data.resultData.row;
            if (row) {
                var cjhtml = '<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">';
                cjhtml += '<div class="modal-dialog" >';
                cjhtml += '<div class="modal-content" onclick="tapBanner(\'/pages/choujiang/index\')">';
                cjhtml += '<img src="' + row.url + '" style="width:370px" />';
                cjhtml += '</div>';
                cjhtml += '</div>';
                cjhtml += '</div>'
                $("#choujiang").append(cjhtml);
                $(function () {
                    $('#triggerModel').trigger('click');
                });
            }
        }, null, null);
    }
    // getcj();
</script>

</html>
